<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- 在模板中放入太多的逻辑会让模板过重且难以维护 -->
    <div id="app">
      <div>用methods处理的msg:{{newmsg}}</div>
      <div>用computed处理的msg:{{reversedMessage}}</div>
      <div>{{myFullname}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data() {
          return {
            message: '今天星期三',
            newmsg: '',
            firstName: '李',
            lastName: '俊峰'
          }
        },
        mounted() {
          //组件挂载后
          this.say()
        },
        methods: {
          say() {
            this.newmsg = this.message
              .split('')
              .reverse()
              .join('')
          }
          //函数和事件函数的位置
        },
        computed: {
          //计算属性 对data数据和一些vuex的数据操作
          // 一定要有return返回值 返回值就是计算的结果
          // 我们可以将同一函数定义为一个方法而不是一个计算属性。
          // 两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。
          // 只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，
          // 多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
          reversedMessage() {
            return this.message
              .split('')
              .reverse()
              .join('')
          },
          fullName() {
            // return this.firstName + '----' + this.lastName
          },
          myFullname: {
            //getter
            get() {
              return this.firstName + '----' + this.lastName
            },
            //setter
            set: function(newVal) {
              console.log(newVal)
              var names = newVal.split(' ')
              console.log(names)
              this.firstName = names[0]
              this.lastName = names[1]
            }
          }
        }
      })
      vm.myFullname = '由 圩委'
    </script>
  </body>
</html>
